<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<script src="../fonts/iconfont.js"></script>
		<style>
			.mui-card .mui-control-content {
				padding: 10px;
			}
			
			.mui-control-content {
				height: 150px;
			}
			
			.nodata {
				text-align: center;
				color: gray;
			}
			
			.diy_header {
				width: 100%;
				background: white;
				padding-bottom: 10px;
				border-bottom: 1px solid #cccccc;
				height: 100px;
				position: relative;
				margin-bottom: 20px;
				position: fixed;
				top: 0;
				color: red;
			}
			
			.mui-content {
				margin-top: 100px
			}
			
			.icon {
				/* 通过设置 font-size 来改变图标大小 */
				width: 4em;
				height: 4em;
				/* 图标和文字相邻时，垂直对齐 */
				vertical-align: -0.4em;
				/* 通过设置 color 来改变 SVG 的颜色/fill */
				fill: currentColor;
				/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
             normalize.css 中也包含这行 */
				overflow: hidden;
			}
			
			.icon2 {
				/* 通过设置 font-size 来改变图标大小 */
				width: 1.5em;
				height: 1.5em;
				/* 图标和文字相邻时，垂直对齐 */
				vertical-align: -0.4em;
				/* 通过设置 color 来改变 SVG 的颜色/fill */
				fill: currentColor;
				/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
             normalize.css 中也包含这行 */
				overflow: hidden;
			}
			
			.diy_model {
				
				color: #656565;
				margin-top: 10px;
			}
			
			.diy_model input {
				color: #ababab;
				display: inline-block;
				width: 40%;
				background: none;
				border: none;
				border-bottom: solid 1px #d7d7d7;
				border-radius: 0;
				text-align: center;
			}
			.diy_model a{
				color: #8F8F8F;
				display: inline-block;
				text-align: center;
				width: 20%;
			}
			.diy_model .des{color: #8F8F8F;width:30%;display: inline-block;text-align: center;overflow: hidden;padding-left: 5%;}
			.diy_model .info{padding-left: 20%;margin-top: 10px;color: #aeaeae;}
		</style>
	</head>

	<body>
		<div class="diy_header">
			<a class="mui-action-back mui-icon" style="padding-left: 1%;width:200px;height:200px;"><span class="mui-icon mui-icon-back" style="color: #333333;font-size: 26px;margin-top: 15px;"></span></a>
			<h3 style="margin: 0;padding: 0;position: absolute;bottom: 20px;padding-left: 3%;color: #333333;">历史记录</h3>

		</div>
		<div class="mui-content" id="historys">
		<!--	<div style="text-align: center;padding: 10px 0;">
				<svg class="icon" aria-hidden="true">
					<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-lishizhongzhi"></use>
				</svg>

			</div>-->
			<div style="padding: 10px 10px;">
				<div id="segmentedControl" class="mui-segmented-control">
					<a class="mui-control-item mui-active" href="#item1">种植信息</a>
					<a class="mui-control-item" href="#item2">养殖信息</a>
					<a class="mui-control-item" href="#item3">订销信息</a>

				</div>
			</div>

			<div id="item1" class="mui-control-content mui-active">
				<div v-if="plantList.length>0">
				<!--	<div class="diy_model" v-for="plant in plantList">
						<span class="des">
						{{plant.des}}
						</span>
						<input type="text" readonly="true" :value="plant.createDate"/>
						<a href="#" >
						<svg class="icon2" aria-hidden="true">
							<use xlink:href="#icon-xinxi"></use>
						</svg>
						详情
						</a>
						
							<div class="info"><span style="width:80%;display: inline-block;">产品等级：{{plant.levelName}}</span></div>
							<div class="info"><span style="width:80%;display: inline-block;">产品类型：{{plant.acq_plant_name}}</span></div>
							<div class="info"><span style="width:80%;display: inline-block;">种植规模：{{plant.scale}}</span></div>
							<div class="info"><span style="width:80%;display: inline-block;">预计产量：{{plant.es_output}}</span></div>
							<div class="info"><span style="width:80%;display: inline-block;">预采集日期：{{plant.ycDate}}</span></div>
							<div class="info"><span style="width:80%;display: inline-block;">必采集日期：{{plant.bcDate}}</span></div>
							
							
					
					</div>-->
					<ul class="mui-table-view">

							<li class="mui-table-view-cell mui-collapse" v-for="plant in plantList">
								<a class="mui-navigate-right" href="#">{{plant.des}}&nbsp;&nbsp;&nbsp;&nbsp;{{plant.createDate}}</a>
								<div class="mui-collapse-content">
									
									<p>
										等级：{{plant.levelName}}
									</p>
									<p>
										产品类型：{{plant.acq_plant_name}}
									</p>
									<p>
										种植规模：{{plant.scale}}
									</p>
									<p>
										预计产量：{{plant.es_output}}
									</p>
										<p>
										预采集日期：{{plant.ycDate}}
									</p>
										<p>
										必采集日期：{{plant.bcDate}}
									</p>
								</div>
							</li>

						</ul>
				</div>
				<div class="nodata" v-if="plantList.length<=0">暂无数据</div>

			</div>
			<div id="item2" class="mui-control-content">
				<div class="mui-card" v-if="breedList.length>0">
					<ul class="mui-table-view">

						<li class="mui-table-view-cell mui-collapse" v-for="breed in breedList">
							<a class="mui-navigate-right" href="#">{{breed.des}}&nbsp;&nbsp;&nbsp;&nbsp;{{breed.createDate}}</a>
							<div class="mui-collapse-content">
								<p>
									等级：{{breed.levelName}}
								</p>
								<p>
									产品类型：{{breed.acq_breed_name}}
								</p>
								<p>
									种植规模：{{breed.scale}}
								</p>
								<p>
									预计产量：{{breed.es_output}}
								</p>
								<p>
									出栏日期日期：{{breed.esReturnDate}}
								</p>
							</div>
						</li>

					</ul>
				</div>
				<div class="nodata" v-if="breedList.length<=0">暂无数据</div>
			</div>

			<div id="item3" class="mui-control-content">
				<div class="mui-card" v-if="dxdanList.length>0">
					<ul class="mui-table-view">

						<li class="mui-table-view-cell mui-collapse" v-for="dxdan in dxdanList">
							<a class="mui-navigate-right" href="#">{{dxdan.desName}}&nbsp;&nbsp;&nbsp;&nbsp;{{dxdan.count}}公斤&nbsp;&nbsp;&nbsp;&nbsp;{{dxdan.createDate}}</a>
							<div class="mui-collapse-content">
									<p>
									销售价格：{{dxdan.price}}元
								</p>
								<p>
								     销售数量：{{dxdan.count}}公斤
								</p>
								<p>
								     交易时间：{{dxdan.dxDate}}
								</p>
							</div>

						</li>

					</ul>
				</div>
				<div class="nodata" v-if="dxdanList.length<=0">暂无数据</div>
			</div>
		</div>
		<script src="../js/resource/mui.js"></script>
		<script src="../js/resource/vue.js"></script>
		<script src="../js/resource/axios.js"></script>
		<script src="../js/resource/config.js"></script>
		<script src="../js/historys.js"></script>
		<script>
			(function($, doc) {
				$.init();
				$.ready(function() {

				});
			})(mui, document);
		</script>

	</body>

</html>